import React from 'react'
import { Table, Button, Space } from 'antd'
import _ from 'lodash'

const CommonTable = ({
  columns,
  dataSource,
  loading,
  showHeader,
  rowKey,
  rowSelection,
  actions,
  className,
  bordered = false,
  components = null,
  onExpandedRowsChange = null,
  expandedRowKeys = null,
  rowClassName = null,
  expandable = {},
  pagination = false,
}) => {
  const tableProps = {
    columns,
    dataSource,
    loading,
    showHeader,
    rowKey,
    rowSelection,
    className,
    bordered,
    components,
    onExpandedRowsChange,
    expandedRowKeys,
    rowClassName,
    expandable,
    pagination,
  }
  return (
    <>
      <div className="CommonTable-actions">
        <Space>
          {_.map(actions, (item, key) => {
            return (
              <Button key={item.id} onClick={item.onClick || null}>
                {item.label}
              </Button>
            )
          })}
        </Space>
      </div>

      <Table {...tableProps} />
    </>
  )
}

export default CommonTable
